:root{
    --body-bg: rgb(255,220,170);
    --body-dark-bg: rgb(36,96,76);
    --link-norm: rgb(14,36,189);
    --link-hov: rgb(11,184,243);
    --link-gr-norm: rgb(150,150,150);
    --link-gr-hov: rgb(14,14,14);
    --link-drk-norm: rgb(85,171,255);
    --link-gr-drk-hov: rgb(235,235,255);
    --text-color: black;
    --text-drk-color: white;
    --text-hidden-color: rgba(0,0,0,.1);
    --text-drk-hidden-color: rgba(255,255,255,.1);
    //color: var(--text-color);
}
h1,h2,h3,h4,h5,h6,p,span,em,strong,b,i,u{color:var(--text-color);}
*{transition:650ms;}
.darkTheme{background: var(--body-dark-bg);}
.darkTheme img{translate: brightness(0.9);}
.darkTheme #toolBar>button{filter: invert(100%) hue-rotate(.5turn);}
.darkTheme body{background: var(--body-dark-bg);}
.darkTheme h1,.darkTheme h2,.darkTheme h3,.darkTheme h4,.darkTheme h5,.darkTheme h6,.darkTheme p{color: var(--text-drk-color);}
.darkTheme span,.darkTheme em,.darkTheme strong,.darkTheme u,.darkTheme i,.darktheme b,.darkTheme div
{color: var(--text-drk-color);}
.darkTheme .divClassNorm{box-shadow: 0 0 3px white; background:rgba(50,50,50,0.7);}
.darkTheme .searchLink,.darkTheme .searchLinkNoIcon{color: var(--link-drk-norm);}
.darkTheme .greyLink{color: var(--link-gr-norm);}
.darkTheme .greyLink:hover{color: var(--link-gr-drk-hov);}
//.darkTheme{color: var(--text-drk-color);}
.darkTheme .answers{color:var(--text-drk-hidden-color);}
body{
    background: var(--body-bg);
}
.divClassNorm{
    background:rgba(230,230,230,0.7);
    border-radius:7px;
    box-shadow:0px 0px 2px black;
    margin:auto 20px;
}
.sep{
    visibility:hidden;
    height:5px;
}
.hidden{
    visibility:hidden;
}
h1,h2,h3,h4,h5,h6{margin:4px auto;}
.searchLink,.searchLinkNoIcon{
    color: var(--link-norm);
    text-decoration: none;
    transition: 300ms;
}
.searchLink:hover,.searchLinkNoIcon:hover{
    color: var(--link-hov);
}
.searchLink:after{
    content: "\f002";
    font-size: smaller;
    vertical-align: super;
    font-family: var(--fa-style-family,"Font Awesome 6 Free");
    font-weight: var(--fa-style,900);
}
.greyLink{
    color: var(--link-gr-norm);
    text-decoration: none;
    transition: 300ms;
}
.greyLink:hover{
    color: var(--link-gr-hov);
}
.divSidebarMain{
    position: relative;
    left: calc((100% - 70%) / (-2));
    width: 70%;
}
.divSidebar{
    position: absolute;
    right: 0%;
    width: 30%;
    top: 10%;
}
.divSidebarFather{
    position: relative;
}
@media (max-width: 700px){
    .divSidebarFather{position: initial;}
    .divSidebarMain{position: initial; left: initial; width: 100%;}
    .divSidebar{position: initial; right: initial; width: 80%; top: 10%;}
}
img{
    width: 90%;
}
.smallImgGood{
    width: 30%;
}
.imgGood,.smallImgGood,.shadowed{
    transition: 300ms;
}
.imgGood:hover,.smallImgGood:hover,.shadowed:hover{
    filter: brightness(1.1) drop-shadow(2px 4px 4px black);
}
.imgGood:hover{
    transform: translate(-80%,0) scale(2);
}
.smallImgGood:hover{
    transform: translate(-160%,0) scale(5.5);
}
.smallText{
    font-size: xx-small;
    margin: 0px;
}
iframe{
    width: 90%;
    max-width: 800px;
    height: auto;
    aspect-ratio: 16 / 9;
}
.nodsp{
    display: none;
}
.boxGood,.boxGoodMove{transition:300ms;}
.boxGood:hover{
    transform: scale(1.7);
    background:rgba(230,230,230,0.95);
}
.boxGoodMove:hover{
    transform: translate(-50%,0) scale(1.7);
    background:rgba(230,230,230,0.95);
}
.submitButton{
    background: blue;
    cursor: pointer;
    color: white;
    padding: 5px 15px;
    margin: 5px;
    border: 0;
    border-radius: 4px;
    transition: 300ms;
}
.submitButton:hover{
    background: rgb(11,177,243);
}
#notes-msg>#refreshButton{
    background: red;
    cursor: pointer;
    color: white;
    padding: 8px 18px;
    margin: 5px;
    border: 0;
    border-radius: 4px;
    transition: 300ms;
}
#notes-msg>#refreshButton:hover{
    background: rgb(255,80,20);
}
.loading{
  border: 6px solid #f3f3f3;
  border-top: 6px solid #3498db; 
  border-radius: 50%;
  animation: spin 1.5s ease-in-out infinite;
}
@keyframes spin{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
#toolBar{
    position: fixed;
    right: 6%;
    bottom: 6%;
    z-index: 10;
    border-radius: 3px;
    margin: 0;
}
#toolBar>button{
    transition: filter 650ms, background 150ms;
    background: var(--link-norm);
    color: white;
    cursor: pointer;
    border: 0;
    border-radius: 3px;
    margin: 2px 3px;
    width: fit-content;
    aspect-ratio: 1/1;
}
#toolBar>button:hover{
    background: var(--link-hov);
}
#toolBar>button>span:before{
    width: 30px;
}
.answers{
    color: var(--text-hidden-color);
}
.answers:hover{
    color: inherit;
}
